import React, { useState, useEffect } from 'react';
import './post.scss';
import { getPostList, getPostVersionList, getPostVersionList2, deleteList, updateList, getDataList } from '../../../api/api';

//antd
import { EyeOutlined, FormOutlined, SendOutlined, DeleteOutlined, RollbackOutlined, UploadOutlined } from '@ant-design/icons';
import { Table, Space, Input, Tooltip, Modal, message } from 'antd';
const { Search } = Input;
const text = <span>查看岗位</span>;

const Post = (props) => {
    const [isModalVisible, setIsModalVisible] = useState(false);

    const [deleteId, setDelId] = useState("");

    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleOk = async () => {
        let { data } = await deleteList({ stationVersionId: deleteId });
        setIsModalVisible(false);

        if (data.code === 200) {
            setDelId("");
        }
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };
    //获取专业列表
    const [postList, setPostList] = useState([]);
    //设置当前nav的选中
    const [ind, setInd] = useState(0);

    const status = window.sessionStorage.getItem('status');

    useEffect(() => {
        const getData = async () => {
            let { data } = await getPostList("");
            if (data.code === 200) {
                setPostList(data.data);
            }
        }
        getData();
    }, []);
    //设置当前专业下的列表
    const [JorList, setJorList] = useState([]);
    //设置当前的专业
    const [majorId, setMajorId] = useState("");
    //设置当前页
    const [pageNum, setPage] = useState(1);
    //设置搜索state
    const [searchValue, setSearch] = useState("");
    const [flag, setFlag] = useState(true);

    useEffect(() => {
        const getJorList = async () => {
            //请求
            let { data } = await (status === "student" ? getPostVersionList({ majorId, pageNum, searchTitle: searchValue }) : getPostVersionList2({ majorId, pageNum, searchTitle: searchValue }));
            //添加唯一key
            data.rows && data.rows.map((item, index) => item.indId = index);
            //设置当前专业下的列表 
            setJorList(data.rows);
        }
        getJorList();
    }, [majorId, searchValue, pageNum, deleteId, flag]);

    const updatedList = async (id) => {
        let { data } = await updateList({ stationVersionId: id });
        setFlag(!flag);
        message.success(data.msg);
    }

    const getDataedList = async (id) => {
        let { data } = await getDataList({ stationVersionId: id });
        setFlag(!flag);
        message.success(data.msg);
    }

    const statusList = ["草稿", "已发布", "待审核"];
    //表格列
    const columns = [
        {
            title: '岗位名称',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '学院',
            dataIndex: 'majorName',
            key: 'majorName',
        },
        {
            title: '版本号',
            dataIndex: 'stationVersion',
            key: 'stationVersion',
        },
        {
            title: '技能数量',
            dataIndex: 'skillNum',
            key: 'skillNum',
        },
        {
            title: '作者',
            dataIndex: 'userName',
            key: 'userName',
        },
        {
            title: '发起时间',
            dataIndex: 'createTime',
            key: 'createTime',
        },
        {
            title: '操作',
            key: 'indId',
            render: ({ stationVersionId }) => {
                return (<Tooltip placement="bottom" title={text}>
                    <EyeOutlined onClick={() => {
                        props.history.push({
                            pathname: "/home/postDetails",
                            state: {
                                id: stationVersionId
                            }
                        });
                    }} style={{ color: '#09f', cursor: 'pointer' }} />
                </Tooltip>)
            }
        }
    ];
    const columns2 = [
        {
            title: '岗位名称',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '专业',
            dataIndex: 'majorName',
            key: 'majorName',
        },
        {
            title: '版本号',
            dataIndex: 'stationVersion',
            key: 'stationVersion',
        },
        {
            title: '技能数量',
            dataIndex: 'skillNum',
            key: 'skillNum',
        },
        {
            title: '作者',
            dataIndex: 'userName',
            key: 'userName',
        },
        {
            title: '发起时间',
            dataIndex: 'createTime',
            key: 'createTime',
        },
        {
            title: '状态',
            key: 'status',
            render: ({ status }) => {
                console.log(status);
                return <div style={{ color: status === "1" ? "" : status === "3" ? "#09f" : "#0f0" }}>{statusList[status - 1]}</div>
            }
        },
        {
            title: '操作',
            key: 'indId',
            render: ({ stationVersionId, status }) => {
                switch (status) {
                    case "1":
                        return (<div style={{ display: "flex", color: "#09f", justifyContent: "space-around" }}>
                            <Tooltip placement="bottom" title="编辑" onClick={() => {
                                props.history.push({
                                    pathname: "/home/postDetails",
                                    state: {
                                        id: stationVersionId,
                                        status:"1"
                                    }
                                });
                            }}><FormOutlined /></Tooltip>
                            <Tooltip placement="bottom" title="提交审核" onClick={() => getDataedList(stationVersionId)}><SendOutlined /></Tooltip>
                            <Tooltip placement="bottom" title="删除"><DeleteOutlined onClick={() => { showModal(); setDelId(stationVersionId); }} /></Tooltip>
                        </div>);
                    case "2":
                        return (<div style={{ display: "flex", color: "#09f", justifyContent: "space-around" }}>
                            <Tooltip placement="bottom" title="查看"><EyeOutlined onClick={() => {
                                props.history.push({
                                    pathname: "/home/postDetails",
                                    state: {
                                        id: stationVersionId
                                    }
                                });
                            }} style={{ color: '#09f', cursor: 'pointer' }} /></Tooltip>
                            <Tooltip placement="bottom" title="升级"><UploadOutlined /></Tooltip>
                        </div>);
                    case "3":
                        return (<div style={{ display: "flex", color: "#09f", justifyContent: "space-around" }}>
                            <Tooltip placement="bottom" title="查看"><EyeOutlined onClick={() => {
                                props.history.push({
                                    pathname: "/home/postDetails",
                                    state: {
                                        id: stationVersionId
                                    }
                                });
                            }} style={{ color: '#09f', cursor: 'pointer' }} /></Tooltip>
                            <Tooltip placement="bottom" title="撤销" onClick={() => updatedList(stationVersionId)}><RollbackOutlined /></Tooltip>
                        </div>);
                    default:
                        return null;
                }
            }
        }
    ];

    console.log(JorList);

    return (
        <div id="post">
            <div className="post_nav">
                <div className="post_nav_left">
                    <span>专业：</span>
                </div>
                <div className="post_nav_right">
                    <span key="0" onClick={() => {
                        setInd(0);
                        setPage(1);
                        setSearch("");
                        setMajorId("");
                    }} className={ind === 0 ? "nav_item active" : "nav_item"}>全部</span>
                    {
                        postList && postList.map((item, index) => {
                            return <span key={item.id} onClick={() => {
                                setInd(index + 1);
                                setPage(1);
                                setSearch("");
                                setMajorId(item.id);
                            }} className={ind === index + 1 ? "nav_item active" : "nav_item"}>{item.name}</span>
                        })
                    }
                </div>
            </div>
            <div className="post_table">
                <Space direction="vertical">
                    <Search
                        placeholder="搜索岗位"
                        allowClear
                        enterButton
                        size="large"
                        value={searchValue}
                        onChange={(e) => setSearch(e.target.value)}
                        onSearch={(value) => {
                            setSearch(value);
                        }}
                    />
                </Space>
                <Table
                    columns={status === "student" ? columns : columns2}
                    pagination={{ current: pageNum, onChange: (page) => setPage(page) }}
                    dataSource={JorList}
                    rowKey={({ indId }) => {
                        return indId
                    }}
                />
            </div>
            <Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                是否删除？
            </Modal>
        </div>
    );
};

export default Post;